<!--  -->
<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="24">
            <a-form-item label="组织名称">
              <a-input v-model="queryParam.fullName" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="组织简称">
              <a-input v-model="queryParam.short_name" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button
              type="primary"
              @click="fetch({ results: 10, ...queryParam })"
              >查询</a-button
            >
            <a-button style="margin-left: 8px" @click="() => (queryParam = {})"
              >重置</a-button
            >
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-divider />
    <div>
      <a-row :gutter="24">
        <a-col :md="24" :lg="6">
          <a-card :bordered="false" :bodyStyle="{ padding: '0' }">
            <org-tree ref="child" @selectTree="selectTree"></org-tree>
          </a-card>
        </a-col>
        <a-col :md="24" :lg="18">
          <div class="line-boder">
            <a-radio-group
              v-model="value"
              :style="{ padding: '10px' }"
              @change="onChange"
            >
              <a-radio
                v-for="(item, i) in list" :key="i"
                :value="item.deptId + ':' + item.fullName"
              >
                {{ item.fullName }}
              </a-radio>
            </a-radio-group>
          </div>
          <div id="selectValue" class="line-boder1">
            <blockquote v-for="(item, i) in selectList" :key="i">
              <a-tag color="#2db7f5">
                {{ item.name }}
                <a @click="delOrganize(item.id, item.name)">x</a>
              </a-tag>
            </blockquote>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
//import { getTreeList } from "@/api/system/organize";
import { getTreeList } from "@/api/okms/department";
// import OrgTree from "./Tree";
import OrgTree from "./Treeokms";
export default {
  // 声明当前子组件接收父组件传递的属性
  props: {
    record: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      queryParam: {
        id: "",
      },
      value: 2,
      organize_id: "",
      organize_name: "",
      org_cascade: "",
      level_num: "",
      list: [],
      selectList: [],
    };
  },
  components: {
    OrgTree,
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    if (this.record.organize_id != undefined) {
      const organize_id = this.record.organize_id;
      const organize_name = this.record.organize_name;
      this.value = this.record.organize_id + ":" + this.record.organize_name;
      this.selectList = [];
      if (organize_id != "") {
        this.selectList.push({ id: organize_id, name: organize_name });
      }
    }
  },
  methods: {
    selectTree(id, name, value) {
      this.organize_id = id;
      this.organize_name = name;
      this.org_cascade = value.split(":")[0];
      this.level_num = value.split(":")[1];
      this.fetch({ results: 10 });
    },
    onChange(e) {
      const value = e.target.value.split(":");
      const id = value[0];
      const name = value[1];
      this.selectList = [];
      this.selectList.push({ id, name });
    },
    fetch(params = {}) {
      this.loading = true;
      getTreeList({ ParentId: this.organize_id, ...params }).then(
        (response) => {
          // Read total count from server
          this.list = response.data.data.list;
        }
      );
    },
    delOrganize(id, name) {
      this.selectList = [];
      // this.selectList.pop({id,name});
      this.value = "";
    },
    onOk() {
      this.$emit("initValue", this.value, "3");
      console.log("监听了 modal ok 事件");
      return new Promise((resolve) => {
        resolve(true);
      });
    },
    onCancel() {
      console.log("监听了 modal cancel 事件");
      return new Promise((resolve) => {
        resolve(true);
      });
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.ant-divider-horizontal {
  margin: 0 0 24px 0;
}

.line-boder {
  height: 180px;
  border: 1px solid #5fb878;
  margin-top: 2px;
  border-radius: 4px;
  overflow-y: scroll;
}

.line-boder1 {
  height: 88px;
  border: 1px solid #5fb878;
  margin-top: 2px;
  border-radius: 4px;
  overflow-y: scroll;
  padding: 4px;
}
</style>